﻿<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const apiBase = import.meta.env.VITE_API_BASE || '';

const PLACEHOLDER_WAREHOUSE_URL = import.meta.env.VITE_WAREHOUSE_URL || 'https://gitee.com/xuan-shuliang/end-of-period';

const menuItems = computed(() => {
  return [
    { label: '首页', route: { name: 'home' }, key: 'home' },
    { label: '仓库', key: 'warehouse', externalUrl: PLACEHOLDER_WAREHOUSE_URL },
    { label: '新增课程', route: { name: 'course-add' }, key: 'course-add', auth: true },
    { label: '新增课程类别', route: { name: 'category-add' }, key: 'category-add', auth: true },
    { label: '新增课程任务', route: { name: 'task-add' }, key: 'task-add', auth: true },
  ].filter((item) => {
    if (!item.auth) return true;
    return authStore.isLoggedIn;
  });
});

const activeMenu = computed(() => {
  const match = menuItems.value.find((item) => route.name?.toString().startsWith(item.key));
  return match?.key || 'home';
});

const handleSelect = (key) => {
  const target = menuItems.value.find((item) => item.key === key);
  if (!target) return;
  if (target.externalUrl) {
    window.open(target.externalUrl, '_self');
    return;
  }
  if (target.route) {
    router.push(target.route);
  }
};

const goLogin = () => {
  router.push({ name: 'login' });
};

const handleLogout = async () => {
  await ElMessageBox.confirm('确认退出当前账号吗？', '提示', {
    confirmButtonText: '退出登录',
    cancelButtonText: '取消',
    type: 'warning',
  });
  authStore.logout();
  ElMessage.success('已退出登录');
  router.push({ name: 'home' });
};
</script>


<template>
  <el-container class="app-layout">
    <el-header class="app-header">
      <div class="app-header__logo" @click="router.push({ name: 'home' })">
        <span class="logo-text">数字化课程学习空间</span>
      </div>
      <el-menu
        class="app-header__menu"
        mode="horizontal"
        :default-active="activeMenu"
        background-color="transparent"
        text-color="#1f1f1f"
        active-text-color="#1677ff"
        @select="handleSelect"
      >
        <el-menu-item v-for="item in menuItems" :key="item.key" :index="item.key">
          {{ item.label }}
        </el-menu-item>
      </el-menu>
      <div class="app-header__actions">
        <template v-if="authStore.isLoggedIn">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ authStore.user?.realName || authStore.user?.username }}
              <el-icon class="el-icon--right">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item disabled>
                  学号：{{ authStore.user?.stuNum || '未填写' }}
                </el-dropdown-item>
                <el-dropdown-item disabled>
                  班级：{{ authStore.user?.className || '未填写' }}
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <el-button type="primary" link @click="goLogin">登录 / 注册</el-button>
        </template>
      </div>
    </el-header>
    <el-main class="app-main">
      <RouterView />
    </el-main>
    <el-footer class="app-footer">
      <span>© {{ new Date().getFullYear() }} 数字化课程学习空间</span>
      <span>请使用校园网访问接口地址 {{ apiBase }}</span>
    </el-footer>
    <el-backtop :right="40" :bottom="40" />
  </el-container>
</template>

<style scoped>
.app-layout {
  min-height: 100vh;
  background: linear-gradient(180deg, #f7f9ff 0%, #fdfdff 100%);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 70px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eef1f8;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header__logo {
  font-weight: 700;
  font-size: 20px;
  color: #1677ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header__menu {
  flex: 1;
  justify-content: center;
  border-bottom: none;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
  justify-content: flex-end;
}

.el-dropdown-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1f1f1f;
}

.app-main {
  padding: 32px;
}

.app-footer {
  padding: 24px 32px;
  text-align: center;
  font-size: 13px;
  color: #5c6470;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #eef1f8;
}

@media (max-width: 960px) {
  .app-header {
    padding: 0 16px;
  }
  .app-header__menu {
    display: none;
  }
  .app-main {
    padding: 16px;
  }
  .app-header__actions {
    min-width: auto;
  }
}
</style>
